<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }
        .aui-tab-item.aui-active {
            font-weight: bold;
            border-bottom: .1rem solid #E94B41;
            color: #333;
            font-size: .7rem;
        }
        .aui-tab-item {
            height: 1.7rem;
            line-height: 1.6rem
        }
        .order-item {
            padding: 0 .6rem;
            margin: .6rem;
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff
        }
        .red-line {
            height: .1rem;
            width: 1.4rem;
            background: #E93324;
            margin: 0 auto;
        }

        .tap-block-title {
            height: 1.6rem;
            color: #333
        }

        .tap-grey-title {
            height: 1.6rem;
            color: #999
        }
    </style>
</head>

<body>
  <div id="app">
    <section class="aui-content">
        <div class="aui-tab font-14">
            <div class="aui-tab-item" v-for='item in taps' tapmode @click='tapSelected(item.tapId)' :data-tapId='item.tapId'>
                <div :class="[tapIndex == item.tapId ?'tap-block-title':'tap-grey-title']">{{item.tap}}</div>
                <div :class="[ tapIndex == item.tapId ? 'red-line' : '' ]">
                </div>
            </div>
        </div>
    </section>
    <section class="font-14 text-color-3">
        <div class="order-item white-bg-radius" tapmode @click='toInvoiceDetail'>
            <div class="height-44 flex-justify-between">
                <div class="flex-align-center">
                    <img class='img-16' src="../../image/merchant/sj.png" alt="" style="margin-right:0.3rem">
                    <span class="font-semibold">2019-10-10</span>
                </div>
                <div class="font-12 red-text">待发货</div>
            </div>
            <div class="flex-justify-between font-semibold font-13" style="height:1.85rem">
                <div>
                    轻食香芒牛肉沙拉瘦身减肥蔬菜三百
                </div>
                <div>等<span>2</span>件商品</div>
            </div>
            <div class="btns">
                <button type="button" name="button">查看详情</button>
            </div>
        </div>
        <div class="order-item white-bg-radius">
            <div class="height-44 flex-justify-between">
                <div class="flex-align-center">
                    <img class='img-16' src="../../image/merchant/sj.png" alt="" style="margin-right:0.3rem">
                    <span class="font-semibold">万嘉便利店</span>
                </div>
                <div class="font-12 red-text">订单待付款</div>
            </div>
            <div class="flex-justify-between" style="height:1.85rem">
                <div class="font-semibold">
                    轻食香芒牛肉沙拉瘦身减肥蔬菜三百
                </div>
                <div class="font-12">¥<span class="font-17">29</span></div>
            </div>
            <div class="btns">
                <button type="button" name="button">取消订单</button>
                <button type="button" name="button">立即付款</button>
            </div>
        </div>
    </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
          var vm = new Vue({
              el: '#app',
              data: {
                taps: [{
                    tap: '全部',
                    tapId: 0
                }, {
                    tap: '待付款',
                    tapId: 1
                }, {
                    tap: '待提货',
                    tapId: 2
                }, {
                    tap: '已完成',
                    tapId: 3
                }],
                tapIndex: 0
              },
              methods: {
                tapSelected: function(tapId) {
                    this.tapIndex = tapId;
                },
                  toInvoiceDetail: function() {
                      api.openFrame({
                        name: 'invoice-detail_win',
                        url: './invoice-detail_win.html',
                          bounces: true,
                          rect: {
                              x: 0,
                              y: 0,
                              w: api.winWidth,
                              h: api.winHeight
                          }
                      })

                  }
              }

          });

    apiready = function() {

    }
</script>


</html>
